<template>
  <div :class="'avatar_container '+ (avatars.length==0?'border':'')" @click="choose">
    <el-tag v-if="!eclipse || avatars.length==1" size="small" v-for="(item,index) in avatars" :key="index">{{item.realName||item.name}}</el-tag>
    <el-tag v-if="eclipse && avatars.length>1">{{avatars[0].realName||avatars[0].name}}等{{avatars.length}}人</el-tag>
    <el-tag size="small" v-if="clearable && avatars.length>0" @click.stop="clearSelect()"><i class="el-icon-circle-close" ></i></el-tag>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'

  export default {
    data () {
      return {
        avatars: []
      }
    },
    props:{
      maxNumber:{
        default:1,
        type:Number
      },
      eclipse:{
        default:function(){ return false},
        type:Boolean
      },
      clear:{
        default: function(){ return false},
        type:Boolean
      },
      clearable:{
        default: function(){ return false},
        type:Boolean
      },
      disabledDingIds:{
        default: function(){ return []},
        type:Array
      },
      disabled:{
        default: function(){ return false},
        type:Boolean
      }
    },
    mixins: [dingMixin],
    methods: {
      bindData (avatars) {
        this.avatars=avatars;
      },
      getDingEmpIds(){
        let ids = [];
        for(let i of this.avatars){
          if(i.emplId){
            ids.push(i.emplId);
          }
          else{
            ids.push(i.dingId);
          }
        }
        return ids;
      },
      getAvatars(){
        return this.avatars;
      },
      clearSelect(){
        this.avatars = []
        this.$emit('avatarChange', []);
      },
      choose(){
        if(this.disabled){
          return;
        }
        let dingIds = []
        if(!this.clear){
          dingIds = this.getDingEmpIds()
        }
        this.complexPicker(this.maxNumber, this.disabledDingIds ,dingIds).then(
          data=>{
            let oldIds = this.getDingEmpIds();
            //this.avatars.length = 0;
            //this.avatars.push(data);
            this.avatars = data;
            let newIds = this.getDingEmpIds();
            if(oldIds.sort().toString() != newIds.sort().toString()){
              this.$emit('avatarChange', newIds);
            }
            //console.log(JSON.stringify(this.avatars));
          }
        )
      }
    }
  }
</script>
<style scoped>
  .avatar_container {
    font-size: 12px;
    width:100%;
    cursor: pointer;
    padding: 0px 3px;
    height: 31px;
    overflow: hidden;
    border-radius: 3px;
    position: relative;
  }

  .border{
    border: lightgray solid 1px;
  }

  .avatar_container div{
    float: left;
    width:30px; height: 30px;
  }

  .avatar_container img{
    width:30px; height: 30px;
  }
</style>
